<template>
  <div>
    <div class="edit-form">
      <div class="checked-device">
        <div class="checked-device-title"><span>维护设备</span></div>
        <h-table-list
          border
          type="local"
          :data="tableData"
          :show-pagination="false"
          :columns="columns"
        >
          <!-- <ListOpearteButton /> -->
          <el-button @click="addCheckedDevice">添加维护设备</el-button>
          <span>只可选择台账状态【启用】的设备，提交审批后不可更改</span>
          <template slot="preview-column" slot-scope="scope">
            <p>{{ scope.row.status }}</p>
          </template>
        </h-table-list>
      </div>
      <FormBasicEquipment
        v-if="data.totalForm[0].formModel.deviceName||!id"
        :submit-handle="submitHandle"
        :data-model="data.totalForm"
      />
    </div>
    <DownloadIdentify
      :visible.sync="dialogDeviceVisible"
      title="添加维护设备"
      @cancel="cancel"
      @update="addChooseDevices"
    >
      <h-table-list
        border
        type="local"
        :page-sizes="[10, 20]"
        :data="deviceBasic.records"
        :columns="columns1s"
        :pagination-info="paginationInfo"
        :form-options="formOptions2s"
        @selection-change="handleSelectionChange"
      >
        <template slot="preview-column" slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
        <template slot="operate-column" slot-scope="scope">
          <tableButton :row="scope.row" />
        </template>
      </h-table-list>
    </DownloadIdentify>
  </div>
</template>

<script>
import data from './const'
import FormBasicEquipment from './form1.vue'
import { mapState, mapMutations } from 'vuex'
import DownloadIdentify from '@/components/FormDialog'
export default {
  name: 'RepairItems',
  components: { FormBasicEquipment, DownloadIdentify },

  data() {
    // 组装扩展信息

    return {
      id: '',
      tableData: [],
      columns: [
        { type: 'index', label: '序号', width: 140 },

        {
          prop: 'deviceName',
          label: '设备名称',
          width: 100
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: 'assetNumber',
          label: '设备编号',
          width: 100
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: 'organName', label: '使用部门', minWidth: 180 }
        // { prop: "departmentName", label: "维护部位简图", minWidth: 180 },
        // {
        //   prop: "operate",
        //   label: "操作",
        //   minWidth: 180,
        //   slotName: "operate-column",
        //   fixed: "right",
        // },
      ],
      data: this.deepCopy(data),
      submitHandle: (params, state) => {
        this.submitForm(params, state)
      },
      paginationInfo: {
        sizeChange: e => {
          console.log(e)
        },
        currentChange: e => {
          this.$store.dispatch('deviceBasic/setListSearchParams', {
            current: e
          })
          this.getList(
            Object.assign({ state: 13 }, this.$store.state.deviceBasic.listSearchParams)
          )
        },
        current: 1,
        total: 10
      },
      formOptions2s: {
        inline: true,
        submitBtnText: '搜索',
        showResetBtn: false,
        searchParamsHandler: () => {
          console.log('搜索')
          this.getList(
            this.$store.state.deviceBasic.listSearchParams
          )
        },
        changevalue: params => {
          //   const forms=this.formOptions.forms.map(e=>{
          //      const key=e.prop
          //      e.defaultValue=params[key]
          //     return e
          //    })
          //  console.log(forms)
          console.log(params)
          this.$store.dispatch(
            'deviceBasic/setListSearchParams',
            params
          )
        },
        resetBtnCallback: () => {
          this.$store.dispatch(
            'deviceBasic/setListSearchParams',
            {}
          )
          this.getList({ state: 13 })
        },
        forms: [
          { prop: 'deviceName', label: '设备名称' },

          { prop: 'assetNumber', label: '设备编号' },
          { prop: 'organId', label: '使用部门', itemType: 'cascader', options: this.$store.state.app.allCode.department }
          // {
          //   prop: "useDepartmentId",
          //   label: "归属部门",
          //   itemType: "select",
          //   options: [
          //     { value: "", label: "部门1" },
          //     { value: 0, label: "部门2" },
          //     { value: 1, label: "部门3" },
          //   ],
          // },

          // {
          //   prop: "positionsId",
          //   label: "职位",
          //   itemType: "select",
          //   options: [
          //     { value: 0, label: "通用" },
          //     { value: 1, label: "专用" },
          //   ],
          // },
          //  {
          //   prop: "userType",
          //   label: "账号类别",
          //   itemType: "select",
          //   options: [
          //     { value: "0", label: "手机" },
          //     { value: "1", label: "PC" },
          //   ],
          // },
        ]
      },
      columns1s: [
        { type: 'selection', label: '序号' },
        { prop: 'deviceName', label: '设备名称' },
        { prop: 'assetCode', label: '固定资产编码' },

        { prop: 'assetNumber', label: '设备编号' },
        { prop: 'deviceClass', label: '设备类别' },
        { prop: 'typeId', label: '设备分类' },
        {
          prop: 'organName',
          label: '使用部门'
        },

        { prop: 'responsible', label: '责任人' },
        { prop: 'deviceModel', label: '型号' }
      ],
      dialogDeviceVisible: false,
      current: 1,
      total: 10,
      chooseDevices: []
    }
  },
  created() {
    this.$store.dispatch(
      'device_repair_maintenance/setTotalForm',
      data.totalForm
    )
  },
  mounted() {
    // 判断是编辑还是新增
    this.preloadData()
    // 加载维护设备和维护项
    this.getDeviceList({ state: 13 })
  },
  computed: {
    ...mapState(['device_repair_maintenance', 'deviceBasic'])
  },
  methods: {
    cancel() {
      this.dialogDeviceVisible = false
    },
    handleSelectionChange(row) {
      console.log('选择维护设备', row)
      this.chooseDevices = row
    },
    addChooseDevices(row) {
      console.log(this.chooseDevices)
      this.tableData = this.chooseDevices
      // this.tableData=uniComplexArr(this.tableData)
      if (this.chooseDevices.length > 1) {
        this.$message('只可选择一台设备')
      } else {
        this.dialogDeviceVisible = false
      }
    },
    async preloadData() {
      const dataKey = this.$route.fullPath
      const id = localStorage.getItem(dataKey)
      this.id = id
      if (id) {
        const data = await this.$store.dispatch(
          'device_repair_maintenance/requestDeviceEditInfo',
          id
        )
        data.viewPath = data.fileArchives
        // 把详情对象分拆为模板格式
        this.data.totalForm[0].formModel = data
        this.tableData = [data]
        this.chooseDevices = [data]
        // this.data.totalForm[1].formModel=data.extra?JSON.parse(data.extra):this.data.totalForm[1].formModel
        // this.data.totalForm[3].formModel.archives=data.archives
        this.$store
          .dispatch(this.$store_url_button, {
            add: this.add || '',
            delete: this.delete || '',
            edit: this.edit || '',
            detail: this.detail || '',
            using: this.using || '',
            useless: this.useless || '',
            downloadIdentify: this.downloadIdentify || ''
          })
          .then(() => {
            // this.getList();
          })
      } else {
        // 先把常量信息给vuex

        this.$store
          .dispatch(this.$store_url_button, {
            add: this.add || '',
            delete: this.delete || '',
            edit: this.edit || '',
            detail: this.detail || '',
            using: this.using || '',
            useless: this.useless || '',
            downloadIdentify: this.downloadIdentify || '',
            changedate: this.changedate || ''
          })
          .then(() => {
            this.getList() // 表格数据
          })
      }
    },
    async getDeviceList(args) {
      // this.listLoading = true

      await this.$store.dispatch('deviceBasic/requestDeviceList', args)
      this.paginationInfo.total = this.$store.state.deviceBasic.total
    },
    submitForm(params, state) {
      console.log(this.chooseDevices)
      if (!this.chooseDevices) {
        console.log('请选择维护设备')
      } else {
        console.log(params)
        const data = Object.assign(
          { assetId: this.chooseDevices[0].assetId, subCode: state },
          { files: params[0].formModel.viewPath }, // 附件后端字段不一样，新增和编辑的时候
          params[0].formModel
        )

        this.$store
          .dispatch('device_repair_maintenance/saveDeviceInfo', data)
          .then(response => {
            this.$store.dispatch('tagsView/delVisitedView', {
              path: this.$route.fullPath
            })
            this.$router.push('/device-repair/maintenance/index')
          })
      }
    },
    getList(params) {
      this.$store.dispatch('deviceBasic/requestDeviceList', params)
      // this.$store.dispatch("device_repair_maintenance/requestDeviceBroadInfo",true)
    },
    addCheckedDevice() {
      console.log('添加点位设备')
      this.dialogDeviceVisible = true
    }
  }
}
</script>
<style lang="scss">
.checked-device {
  background: white;
  margin: 10px 0;
  padding: 20px;
  .checked-device-title {
    margin: 10px 0;
    font-size: 16px;
  }
}
.check-device-buttons {
  margin: 20px 0;
  text-align: center;
}
.edit-form {
  margin: 10px;
  .edit-now-info {
    background: white;
  }
  .edit-form-history-info {
    background: white;
    margin: 20px 0;
  }
}
</style>
